<!--
 * @Author: cjx
 * @Date: 2023-04-18 17:42:46
 * @LastEditTime: 2023-04-19 11:18:20
 * @Description: 下拉选择
-->

<template>
  <div>
    <!-- 纯占位 -->
    <Select v-if="loading" />
    <Select
      v-if="!loading"
      v-model="computedVal"
      :size="size"
      :label-in-value="labelInValue"
      :transfer="true"
      clearable
      v-bind="$attrs"
      @on-change="onChange"
      @on-query-change="onQuery"
    >
      <Option v-if="empty" value="">请选择</Option>
      <Option
        v-for="(item, key) in initList"
        :disabled="isEquclacode && item.value != equclacode"
        :value="item.value"
        :label="item.label"
        :key="`${item.value}${key}`"
      >
        {{ item.label }}
      </Option>
    </Select>
  </div>
</template>

<script lang="ts" setup>
import { apiFindDictList } from '@/api/common'
import { computed } from '@vue/reactivity'
import { onBeforeMount, reactive, ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Array],
    default: ''
  },
  // 自定义下拉数据
  list: {
    type: Array,
    default: () => []
  },
  equclacode: {
    // 设备类型代码
    type: String,
    default: ''
  },
  type: {
    // 字典类型
    type: String,
    default: ''
  },
  pId: {
    // 父级id
    type: String,
    default: '-1'
  },
  pVal: {
    // 父级值
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'default'
  },
  empty: {
    // 是展示空值选项
    type: Boolean,
    default: true
  },
  labelInValue: {
    // 是否同时返回label和value
    type: Boolean,
    default: true
  },
  selectFirst: {
    // 是否默认选中首项
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:modelValue', 'on-change', 'on-query'])

// 设备类别禁用标志
const isEquclacode = computed(() => Boolean(props.equclacode))

// 监听部分
watch(
  () => props.pVal,
  () => init()
)
watch(
  () => props.pId,
  () => init()
)
watch(
  () => props.list,
  (newV) => {
    if (newV.length > 0) {
      init()
    } else {
      initList = []
    }
  }
)

//  列表初始化
const computedVal = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val)
  }
})

interface IinitListObj {
  label: string
  value: string
}
let initList: Array<IinitListObj> = reactive([])
const init = () => {
  // 自定义数据、字典数据判断
  if (props.list.length > 0) {
    initList = props.list as any

    // 默认选中第一项
    if (props.selectFirst && !computedVal.value) {
      computedVal.value = initList[0].value
    }
  } else if (props.list.length === 0 && props.type) {
    getList()
  }
}

onBeforeMount(() => {
  init()
})

let loading = ref(false)
const getList = async () => {
  loading.value = true
  const res = await apiFindDictList({
    type: props.type,
    parentId: props.pId,
    parentValue: props.pVal
  })
  const { isSuccess, errorMsg, errormsg, data } = res
  if (isSuccess) {
    // console.log(`数据字典${type}:`, data)
    initList = data || []
    if (props.selectFirst && initList.length > 0 && !computedVal.value) {
      computedVal.value = initList[0].value
    }
  } else {
    window.$Message.error(`数据字典错误：${errorMsg || errormsg}`)
  }
  loading.value = false
}

// 回调处理
interface IselectItem {
  value: string
  label: string
  tag: any
}
const onChange = (t: IselectItem | Array<IselectItem>) => {
  emits('on-change', t || {})
}
const onQuery = (t: any) => {
  // 暂支持自定义数据 查询
  emits('on-query', t || {})
}
</script>
